<template>
  <view class="app-container manager-page">
    <view class="banner-wrapper">
      <u-swiper
          :list="banners"
          height="360rpx"
          @change="changeSwiper"
          @click="clickSwiper"
      ></u-swiper>
    </view>

    <view class="my-house-wrapper" v-if="order">
      <view class="my-house">
        <view class="left">
          <view class="house-name">{{ order.premisesAddress }}</view>
          <view class="time-range">租住：{{ order.checkInTime }} 至 {{ order.checkOutTime }}</view>
        </view>
        <view class="right">
          <view class="btn" @click="toMap">
            <image class="icon"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E5%AF%BC%E8%88%AA%402x.png"
                   mode="widthFix"></image>
            <text>导航</text>
          </view>
          <view class="btn" v-if="orderNumber>1" @click="goto('/pages/manager/switch-rooms')">
            <image class="icon"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E5%88%87%E6%8D%A2%E6%88%BF%E9%97%B4%402x.png"></image>
            <text>切换房间</text>
          </view>

        </view>
      </view>
    </view>

    <view class="body" v-if="order">
      <l-section title="入住管理" titleFontSize="36rpx" weight padding="20rpx 0"></l-section>
      <u-grid :border="false">
        <u-grid-item class="grid-item" v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex"
                     @click="clickGridItem(baseListItem)">
          <u-icon :name="baseListItem.icon" :size="26"></u-icon>
          <text class="grid-text">{{ baseListItem.title }}</text>
          <view class="badge">
            <u-badge v-if="baseListItem.title === '入住账单'" shape="horn" numberType="overflow"
                     type="error" :max="99"
                     :value="unpaidOrderCount"></u-badge>
          </view>
        </u-grid-item>

        <u-grid-item class="grid-item" @click="goto('/pages/manager/temp-password/list')" v-if="showSmartLockIcon">
          <u-icon name="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/lock%402x.png"
                  :size="26"></u-icon>
          <text class="grid-text">临时密码</text>
        </u-grid-item>


      </u-grid>
    </view>
    <view class="body">
      <l-section title="房屋管家" titleFontSize="36rpx" weight padding="20rpx 0"></l-section>
      <u-grid :border="false">
        <u-grid-item class="grid-item" v-for="(item,index) in houseManagerList" :key="index"
                     @click="clickGridItem(item)">
          <view class="icon-box">
            <u-icon :name="item.icon" :size="26"></u-icon>
            <view v-if="item.num" class="num">{{ item.num }}</view>
          </view>
          <text class="grid-text">{{ item.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <!--   自定义底部导航栏   -->
    <tab-bar />
  </view>
</template>

<script>
import {goto} from "@/utils/common";
import {houseList, unpaidOrderCount} from "@/api/manager/order";
import storage from "@/utils/storage";
import constant from "@/utils/constant";
import {adList} from "@/api/common";
import {getWorkOrderCountPayState} from "@/api/manager/workOrder";

export default {
  data() {
    return {
      // 是否显示智能锁
      showSmartLockIcon: false,
      // 未支付账单数
      unpaidOrderCount: 0,
      banners: [{
        id: 1,
        url: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/saas-v5/1714375370403baner_1.png',
      }, {
        id: 2,
        url: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/saas-v5/1714375370403baner_1.png',
      }],
      order: null,
      orderNumber: 0,
      baseList: [
        {
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E7%A7%9F%E5%AE%A2%E4%BF%A1%E6%81%AF%402x.png',
          title: '住客信息',
          page: '/pages/manager/tenant/tenant-list'
        },
        {
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E4%BD%8F%E5%AE%A2%E8%AE%A4%E8%AF%81-2.png',
          title: '住客认证',
          page: '/pages/manager/auth/auth-list'
        },
        {
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E8%B4%A6%E5%8D%95%402x.png',
          title: '入住账单',
          page: '/pages/manager/bill/bill-list'
        },

      ],
      // 房屋管家列表
      houseManagerList: [
        {
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%8A%A5%E4%BF%AE.png',
          title: '报事报修',
          page: '/pages/manager/workOrder/maintenance/list',
          num: 0
        },
        {
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/baojie.png',
          title: '保洁管理',
          page: '/pages/manager/workOrder/cleaner/list',
          num: 0
        },
        {
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/jiancha.png',
          title: '日常检查',
          page: '/pages/manager/daily-inspection/index'
        },
        // {
        //   icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%8A%A5%E4%BF%AE.png',
        //   title: '报事报修',
        //   page: '/pages/manager/workOrder/maintenance/list'
        // }
      ],
    };
  },
  computed: {
    location: {
      get() {
        return this.$store.state.user.location
      },
      set() {
      }

    },
  },
  onShow() {
    this.getHouse()
    this.getAd()
    this.getWorkOrderCountPayState()
  },
  methods: {
    getHouse: async function () {
      const houseList = await this.getHouseList()
      this.orderNumber = houseList.length
      let room = storage.get(constant.room);
      if (this.orderNumber > 0) {
        console.log('room&&houseList.findIndex(item=>item.houseId===room.houseId)>-1', room && houseList.findIndex(item => item.houseId === room.houseId) > -1)
        console.log('room.houseId', room.houseId)
        if (room && houseList.findIndex(item => item.houseId === room.houseId) > -1) {
          this.order = houseList.find(item => item.houseId === room.houseId)
        } else {
          this.order = houseList[0]
          storage.set(constant.room, this.order)
        }
        // 获取未支付账单数量
        unpaidOrderCount(this.order.orderId).then(res => {
          this.unpaidOrderCount = res.data;
        })
        // 房间是否关联智能锁状态:1是 0否
        // 房屋关联智能锁且成员类型：1个人承租人 2房管员才显示
        // 满足这两个条件才显示智能锁入口
        console.log('this.order.houseLockStatus === "1"', this.order.houseLockStatus === "1")
        if (this.order && this.order.houseLockStatus === "1" && (this.order.memberType === '1' || this.order.memberType === '2')) {
          this.showSmartLockIcon = true
        } else {
          this.showSmartLockIcon = false
        }
      } else {
        this.order = null
      }
    },
    goto,
    changeSwiper(event) {
      console.log("event: " + event)
    },
    async getHouseList() {
      return new Promise((resolve, reject) => {
        houseList().then(res => {
          if (res.code === 200) {
            resolve(res.data);
          } else {
            reject('request error');
          }
        })
      })
    },
    toMap() {
      uni.openLocation({
        latitude: this.order.latitude,
        longitude: this.order.longitude,
        name: '房源位置',
        address: this.order.fullAddress
      })
    },
    clickSwiper(event) {
      console.log('click', event.detail,event);
    },
    clickGridItem(item) {
      // 先判断是否有订单
      if (!this.order) {
        this.$modal.msg('请先选择房间')
        return;
      }
      console.log('item',item)
      const url = item.page
      this.$tab.navigateTo(url)
    },
    getAd() {
      adList({
        location: '3',
        cityCode: this.location?this.location.id:''
      }).then(res => {
        console.log('adList', res)
        if(res.code === 200 && res.data.length>0){
          this.banners = res.data.map(item => {
            return {
              ...item,
              url: item.img
            }
          })
        }else{
          this.banners = [{
            id: 1,
            url: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/saas-v5/1714375370403baner_1.png',
          }, {
            id: 2,
            url: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/saas-v5/1714375370403baner_1.png',
          }]
        }
      })
    },
    // 获取待支付工单数量
    getWorkOrderCountPayState() {
      let room = storage.get(constant.room);

      getWorkOrderCountPayState({
        houseId: room.houseId,
      }).then(res => {
        console.log('getWorkOrderCountPayState', res)
        if(res.data){
          // this.houseManagerList[0].num = res.data[1].num
          // this.houseManagerList[1].num = res.data[2].num
          for (const resKey in res.data) {
            console.log('resKey', resKey)
            if(res.data[resKey].workOrderType === '1'){
              this.houseManagerList[0].num = res.data[resKey].num
            }else if(res.data[resKey].workOrderType === '2'){
              this.houseManagerList[1].num = res.data[resKey].num
            }else if(res.data[resKey].workOrderType === '3'){
              this.houseManagerList[2].num = res.data[resKey].num
            }
          }
        }else{
          this.houseManagerList[0].num = 0
          this.houseManagerList[1].num = 0
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.manager-page {

  ::v-deep .u-grid-item {
    padding: 20rpx;
  }

  .badge {
    position: absolute;
    top: 0;
    right: 80rpx;
  }

  background-color: #fff;
  min-height: 100vh;

  .banner-wrapper {
    padding: 20rpx;
  }

  .my-house-wrapper {
    padding: 20rpx;

    .my-house {
      padding: 40rpx 20rpx;
      border-radius: 20rpx;
      background-color: #f5f5f5;
      display: flex;

      .left {
        flex: 1;

        .house-name {
          font-size: 32rpx;
          font-weight: 800;
        }

        .time-range {
          font-size: 28rpx;
          color: #999;
          margin-top: 20rpx;
        }

      }

      .right {
        width: 240rpx;
        display: flex;

        .btn {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .icon {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }

  .grid-text {
    margin-top: 20rpx;
    font-size: 26rpx;
  }

  .icon-box {
    position: relative;

    .num {
      position: absolute;
      right: -20rpx;
      top: 0;
      background: #FF3E27;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      font-weight: bold;
      font-size: 18rpx;
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
      text-transform: none;
      padding: 2rpx 8rpx;
    }
  }


}

</style>
